<template>
  <div class="musicbar-main soft">
    <div class="details" @click="gotoDetails">
      <div class="cover soft">
        <van-image
            width="3rem"
            height="3rem"
            round
            :src="musicData?.al?.picUrl ?? '' "
            fit="cover"
        />
      </div>
      <div class="music-info">
        <div class="loading" v-if="musicLoading">
          <van-loading class="soft" type="spinner" color="#1989fa" size="1rem" />
        </div>
        <div class="context" v-else>
          <v-text mode="marquee" class="music-info-text music-name" :text="musicData?.name" />
          <v-text class="music-info-text music-artist" :text="musicData?.ar?.map((item) => item.name).join(' / ')" />
        </div>

      </div>
    </div>
    <div class="music-control">
      <van-icon @click="playOrPause" class-prefix="music" :name="musicIsPlay?'zanting':'bofang'" class="play micon soft "/>
      <van-icon @click="nextMusic" class-prefix="music" name="next" class="play micon" />
      <van-icon @click="showPlayLists" v-touch class-prefix="music" name="gedan" class="last micon"/>
    </div>
  </div>
</template>
<script setup>
import {useStore} from "vuex";
import {computed, inject, toRefs, watch} from "vue";
import {useRouter} from "vue-router";

let router = useRouter();

let store = useStore();

let music = toRefs(store.state.music);
let musicData = music.musicData;
let musicIsPlay = music.musicIsPlay;
let musicLoading = music.musicLoading;

// 是否显示音乐详情
let show_music_popup = inject('show_music_popup');
// 是否显示歌单
let show_music_playlists = inject('show_music_playlists');


function gotoDetails(){
  show_music_popup.value = true;
}


function showPlayLists(){
  show_music_playlists.value = true;
}

function playOrPause(){
  if(musicIsPlay.value){
    store.dispatch("music/pause");
  }else{
    store.dispatch("music/play");
  }
}

function nextMusic(){
  store.dispatch("music/next");
}


</script>
<style lang="scss" scoped>
.musicbar-main {
  display: flex;
  align-items: center;
  width: 98%;
  height: 3.5rem;
  margin: .5rem auto;
  padding: 0 .5rem;
  box-sizing: border-box;

  .details {
    display: flex;
    width: 70%;
    flex-grow: 1;

    .cover {
      width: 3rem;
      height: 3rem;
      padding: .1rem;
      margin-right: .5rem;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    .music-info {
      display: flex;
      flex-direction: column;
      width: 60%;
      justify-content: center;
      overflow: hidden;

      .loading{
        margin: 0 1rem;
        box-sizing: border-box;
      }

      .music-info-text {
        font-size: 12px;
      }

      .music-artist {
        margin: .2rem 0;
      }
    }
  }

  .music-control {
    display: flex;
    width: 6rem;
    justify-content: space-around;

    .micon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: .8rem;
      height: .8rem;
      padding: .5rem;
      margin-right: .5rem;
      background: white;
      border-radius: 50%;
      color: #07c160;
      border: 1px solid #eee;
    }
  }
}
</style>